<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>文章详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<script type="text/javascript" src="../js/lib/remtest.js"></script>
		<link rel="stylesheet" href="../css/app.css" />
		<script type="text/javascript" src="../js/iconfont.js"></script>
		<style type="text/css">
			html,
			body {
				font-family: "microsoft yahei";
				background-color: #fff;
			}
			
			.mui-content {
				background: #FFFFFF !important;
			}
			
			.iconzs {
				width: 1em;
				height: 1em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			
			.mui-card-link .mui-icon {
				font-size: 18px;
				color: #8a8a8a;
			}
			
			.mui-card-header.mui-card-media .mui-media-body {
				font-size: 15px;
				font-weight: 500;
				line-height: 24px;
				margin-bottom: 0;
				margin-left: 0px;
				color: #333;
			}
			
			.mui-card-header.mui-card-media .mui-media-body h4 {
				font-size: 16px;
				line-height: 24px;
				width: 100%;
				color: #313131;
				position: relative;
			}
			
			.mui-card-header.mui-card-media .mui-media-body p {
				font-size: 13px;
				margin-bottom: 0;
				line-height: 20px;
				padding-top: 10px;
			}
			
			.xianqing {
				width: 0.5em;
				height: 0.5em;
				display: block;
			}
			
			.rightqj {
				display: inline-block;
			}
			
			.mui-card-footer:before,
			.mui-card-header:after {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.mui-card-header:after {
				top: auto;
				height: 1px;
				bottom: 0;
				width: 90%;
				margin: 0 auto;
				text-align: center;
			}
			
			.mui-card {
				margin: 10px 10px !important;
				border-radius: 5px;
			}
			
			.mui-table-view {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				padding-left: 0;
				list-style: none;
				background-color: rgba(0, 0, 0, 0);
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell {
				font-size: 17px;
				display: inline-block;
				margin-right: -4px;
				padding: 10px 0 0 10px;
				text-align: center;
				vertical-align: middle;
				background: 0 0;
			}
			
			.mui-table-view.mui-grid-view {
				font-size: 0;
				display: block;
				width: 100%;
				padding: 0 0px 10px 0;
				white-space: normal;
			}
			
			.zixuntit {
				background: #5092e4;
				height: 7em;
				width: 100%;
				border-radius: 8px;
			}
			
			.zixuntit .iconzs {
				font-size: 50px;
				margin-top: 20px;
			}
			
			.zixuntit .ltit {
				line-height: 40px;
				color: #FFFFFF;
			}
			
			.newtit {
				text-align: left;
				padding: 0 0.22rem;
			}
			
			.newtit h1 {
				line-height: 0.4rem;
				font-size: 0.35rem;
			}
			
			.newtit h6 {
				line-height: 0.4rem;
				font-size: 0.20rem !important;
				color: #888888;
			}
			
			.newscont {
				padding: 0 0.22rem;
				font-size: 0.28rem;
				line-height: 0.3rem;
				margin-bottom: 44px;
				padding-bottom: 0.3rem;
				color: #000000 !important;
			}
			
			#fixbottom {
				position: fixed;
				bottom: 0px;
				width: 100%;
				background: #FFFFFF;
			}
			
			.newscont :before {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.newscont img {
				max-width: 100%;
			}
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">文章详情</h1>
		</header>-->

		<div class="mui-content mui-fullscreen">

			<div class="newtit">
				<h1 id="a_title"></h1>
				<h6><font id="source">中诚黄金 </font>&nbsp;&nbsp;<font id="author">中诚黄金 </font>&nbsp;&nbsp;<font id="add_time"></font></h6>
			</div>
			<p style="border-bottom: 1px dashed #CCCCCC;"></p>
			<div class="newscont" id="newscont">

			</div>

			<div id="fixbottom">
				<div class="mui-card-footer" style="position: initial;">
					<a class="mui-card-link" onclick="openShare();">
						<span class="mui-icon">
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-zhuanfa"></use>
								</svg>
		                    	<font id="ShareCount"></font>
		                   </span>
					</a>
					<a class="mui-card-link">
						<span class="mui-icon">
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-yuedu"></use>
								</svg>
		                    	<font id="click" ></font>
		                    	
		                   </span>
					</a>
					<a class="mui-card-link" onclick="handle(0);">
						<span class="mui-icon">
		                    	
		                    	<svg class="iconzs" >
 									 <use id="collectionImg" xlink:href="#icon-shoucangweixuan"></use>
								</svg>
		                    	<font id="CollectionCount"></font>
		                   </span>
					</a>
				</div>

			</div>

		</div>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/static.js"></script>
		<script type="text/javascript" src="../js/Common.js"></script>

		<script type="text/javascript" charset="utf-8">
			/*选项卡*/
			mui.init({
				swipeBack: false
			});

			var aItem; //一篇文章；
			(function($) {

				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if(this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint 
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});

				mui.getJSON('http://www.99990158.com/ajax/GetArticle.ashx', {
					id: getUrlParam('id')
				}, function(item) {
					//全局变量 仓储文章对象
					aItem = item;
					//初始化分享需要的消息内容
					setShareMsg(item);
					document.getElementById('a_title').innerText = item.title;
					document.getElementById('source').innerText = item.fields.source;
					document.getElementById('add_time').innerText = item.add_time;
					document.getElementById('newscont').innerHTML = item.content;
					document.getElementById('author').innerHTML = item.fields.author;
					if(item.fields.appCollectionCount)
						document.getElementById('CollectionCount').innerText = item.fields.appCollectionCount;
					else {
						document.getElementById('CollectionCount').innerText = 0;
					}
					if(item.fields.appShareCount)
						document.getElementById('ShareCount').innerText = item.fields.appShareCount;
					else {
						document.getElementById('ShareCount').innerText = 0
					}

					//点击量
					document.getElementById('click').innerText = item.click;
					mui.get('http://www.99990158.com/tools/submit_ajax.ashx', {
						action: 'view_article_click',
						id: item.id,
						click: 1
					}, function(res) {
						//document.getElementById('click').innerText=res;
					});

					//判断是否收藏了 
					if(isLogin()) {
						console.log('00');
						mui.post('http://app.99990158.com/Article/IsCollection', {
							aId: item.id,
							userId: GetLoginUserInfo().LoginId
						}, function(res) {

							if(res.Success) {
								setCollectionImg(1);
							} else {
								setCollectionImg(0);
							}
						}, 'json');
					}

					mui(".newscont img").each(function(index, img) {

						var src = img.getAttribute('src');
						if(src.indexOf('http://') < 0)
							img.setAttribute('src', 'http://www.99990158.com' + src);
					});

				});

			})(mui);
			//传1表示已经收藏过 0表示为收藏的状态
			function setCollectionImg(flag) {

				if(flag == 1) {
					document.getElementById('collectionImg').setAttribute("xlink:href", '#icon-shoucangyixuan');
				} else if(flag == 0) {
					console.log(flag);
					document.getElementById('collectionImg').setAttribute("xlink:href", '#icon-shoucangweixuan');
				}
			}

			function handle(type) {
				var id = getUrlParam('id');
				var ShareCount = 0;
				var CollectionCount = 0;
				if(type == 's') {
					ShareCount = 1;
					share();
					return;

				} else {

					try {
						state = JSON.parse(localStorage.getItem("loginState"));
						if(!state) {
							outSet("请先登录！");
							return;
						}

					} catch(e) {
						console.log(e);

						outSet("操作失败！");
						return;
					}

					CollectionCount = 1;

					//更新用户数据
					post(function() {
						post2({
							id: id,
							ShareCount: ShareCount,
							CollectionCount: CollectionCount
						});

					});

				}

			}
			//更新用户数据
			function post(fun) {
				var data;
				try {
					state = JSON.parse(localStorage.getItem("loginState"));
					var article = JSON.parse(JSON.stringify(aItem));
					article.content = "";
					article.zhaiyao = "";
					data = {
						ArticleId: aItem.id + "",
						UserId: state.LoginId,
						UserType: state.type,
						Info: JSON.stringify(article)
					};

				} catch(e) {
					console.log(e);
				}

				mui.post('http://app.99990158.com/Article/Collection', data, function(res) {

					if(res.Data.IsCollection) {
						setCollectionImg(1);
						if(fun) {
							fun();
						}
					} else {

						setCollectionImg(0);
					}
				}, 'json');

			}
			//更新官网
			function post2(data) {
				mui.post('http://www.99990158.com/ajax/SetArticleAppCounts.aspx', data, function(item) {
					document.getElementById('CollectionCount').innerText = item.appCollectionCount;
					document.getElementById('ShareCount').innerText = item.appShareCount;

				}, 'json');
			}
		</script>

		<script type="text/javascript">
			var msg = {
				"href": 'http://m.99990158.com/m_newsye.html?id=' + getUrlParam('id'),
				"title": "中诚黄金",
				"content": "中诚黄金是上海黄金交易所的会员，专业从事黄金T+D业务的咨询服务，致力于为广大客户提供及时、全面、专业的黄金投资咨询服务。",
				"thumbs": ["_www/logo.png"]
			};

			function setShareMsg(item) {
				msg.title = item.title;
				msg.content = item.zhaiyao;
			}

			function openShare() {
				post2({
					id: getUrlParam('id'),
					ShareCount: 1,
					CollectionCount: 0
				});
				shareWebview();
			}
			mui.plusReady(function() {
				ws = plus.webview.currentWebview();
				//关闭splash页面；
				plus.navigator.closeSplashscreen();
			})
			var sharew;
			var ws = null;
			/**
			 *分享窗口
			 */
			function shareWebview() {
				ws = plus.webview.currentWebview();
				if(sharew) { // 避免快速多次点击创建多个窗口
					return;
				}
				var top = plus.display.resolutionHeight - 134;
				var href = "share.html";
				sharew = plus.webview.create(href, "share.html", {
					width: '100%',
					height: '134',
					top: top,
					scrollIndicator: 'none',
					scalable: false,
					popGesture: 'none'
				}, {
					shareInfo: {
						"href": msg.href,
						"title": msg.title,
						"content": msg.content,
						"logo": msg.thumbs,
						"pageSourceId": ws.id
					}
				});
				sharew.addEventListener("loaded", function() {
					sharew.show('slide-in-bottom', 300);
				}, false);
				// 显示遮罩层  
				ws.setStyle({
					mask: "rgba(0,0,0,0.5)"
				});
				// 点击关闭遮罩层
				ws.addEventListener("maskClick", closeMask, false);
			}

			function closeMask() {
				ws.setStyle({
					mask: "none"
				});
				//避免出现特殊情况，确保分享页面在初始化时关闭 
				if(!sharew) {
					sharew = plus.webview.getWebviewById("share.html");
				}
				if(sharew) {
					sharew.close();
					sharew = null;
				}
			}
		</script>
	</body>

</html>